<template>
	<view>
		<!-- 自定义导航栏 -->
		<u-navbar
		    @rightClick="rightClick"
		    :autoBack="true"
			border="true"
			custom-nav-height='44px'
			placeholder='true'
		>
			<view
				class="u-nav-slot"
				slot="center"
			>
		        <u-search searchIconColor='#248FF9'  placeholder="搜索您的目的地"  v-model="keyword" :show-action="false"></u-search>
		    </view>
		</u-navbar>
		<!-- 定位 -->
		<view class="position">
			<text>当前/历史</text>
			<u-tag bgColor='#F4F4F4' color='#101010' text="重庆" size="mini" @click='getLocation' icon="map-fill" plain></u-tag>
		</view>
		<view class="hot_city">
			<text>热门城市</text>
			<view class="hot_list">
				<u-tag bgColor='#F4F4F4' color='#101010' :text="item" v-for="(item,index) in hotList" :key='index' @click='pass(item)'></u-tag>
			</view>
		</view>
		<!-- 位置列表 -->
		<u-index-list  :sticky='false' :index-list="indexList">
				<template v-for="(item, index) in List">
					
					<u-index-item>
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<view class="list-cell">
							{{item.name}}
						</view>
					</u-index-item>
				</template>
			</u-index-list>
	</view>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				keyword: '',
				indexList: ["A", "B", "C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
				itemArr: [
					['列表A1','列表A2','列表A3'],
					['列表B1','列表B2','列表B3'],
					['列表C1','列表C2','列表C3']
				],
				hotList:['上海','北京','广州','成都','重庆','杭州','西安','南京','厦门'],
				List:[],
			}
		},
		methods: {
			rightClick() {
			    console.log('rightClick');
			},
			leftClick() {
			    console.log('leftClick');
			},
			//用户授权
			getLocation(){
				
				let that = this;
				    wx.getSetting({
				      success(res) {
				        if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
				          wx.openSetting({
				            success(res) {}
				          })
				        }  else { // 第一次授权，或者已授权，直接调用相关api
				          that.getMyLocation()
				        }
				      }
				    })
			},
			//获取地理位置
			 getMyLocation(){
			    let that = this
			    wx.getLocation({
			      type: 'wgs84',
			      success(res) {
			        console.log(res)
			      }
			    })
				//跳转地图获取定位
				// uni.chooseLocation({
				// 	success: function (res) {
				// 		console.log('位置名称：' + res.name);
				// 		console.log('详细地址：' + res.address);
				// 		console.log('纬度：' + res.latitude);
				// 		console.log('经度：' + res.longitude);
				// 	}
				// });
			  },
			  pass(item){
				  uni.$emit('site',{msg:item});
				  uni.navigateBack({
				  	url: '../index/index',
				  });
			  },
			  //获取全国地名
			getPosition(){
				const requestTask = uni.request({
					url: 'https://restapi.amap.com/v3/config/district?keywords=中国&subdistrict=2&key=160ba4fcc5e4461b53ddebaaa395ae18',					
					method:'get',
					success:((res)=>{
						console.log(res.data.districts);
						this.List=res.data.districts[0].districts
						console.log(this.List)
					})
					// success: function(res) {
					// 	console.log(res.data.districts);
					// 	this.List=res.data.districts
					// }
				});
				
			}
		},
		onLoad() {
			
		},
		mounted() {
			// this.getPosition();
			
		}
	}
</script>

<style lang="scss" scoped>
.u-nav-slot{
	margin-right: 40px;
}
.position{
	margin-top: 5px;
	padding: 30px 0 0 10px;
	background: #fff;
	line-height: 50px;
	text{
		font-weight: 800;
		font-size: 28rpx;
		
	}
	/deep/ .u-tag{
		width: 20%;
		text-align: center;
		border:none;
		display: flex;
		justify-content:flex-end;
		padding: 3px 15px;
		text{
			font-size: 28rpx;
			margin-left: 10px;
		}
	}
}
.hot_city{
	background: #FFFFFF;
	padding:0 30px 0 10px;
	line-height: 50px;
	text{
		font-weight: 800;
		font-size: 28rpx;
	}
	.hot_list{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
		
		/deep/ .u-tag{
			width: 80px;
			margin-bottom:10px;
			border: none;
			text{
				margin: 0 auto;
			}
		}
	}
	
}
.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
